<!-- <!-- {$nickname}
asdasdasdasdasdasd -->
<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 250px;
  overflow: hidden;
}

</style>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/cropper/css/jquery.Jcrop.min.css">
<div  class="easyui-layout" data-options="fit:true"> 
     
 

    <div data-options="region:'west',title:'',split:true,border:false,split:false" style="width:150px;padding: 15px 5px 5px 20px;background:#e0ecff;">


		<if condition="$avatar==''"><img src="__PUBLIC__/images/avata.png" class="account-avator-bg easyui-tooltip" title="点击上传头像" onclick="upload_avatar_show()" /> <else /> <img src="{$avatar}" class="account-avator-bg  easyui-tooltip" title="点击更换头像" onclick="upload_avatar_show()"/></if>
    </div>   
    <div data-options="region:'center',title:'',border:false,split:false" style="padding:5px 5px 5px 0">
		<div id="user_info_tab" class="easyui-tabs" style="width:500px;height:250px;"  data-options="fit:true">   
		    <div title="用户信息" style="padding:20px;">   
		        <table>
					<tr>
						<td>用户名：</td>
						<td>{$username}</td>
					</tr>
					<tr>
						<td>昵称：</td>
						<td>{$nickname}</td>
					</tr>
					<tr>
						<td>用户组：</td>
						<td>{$_SESSION['zname']}</td>
					</tr>
					<tr>
						<td>E-Mail：</td>
						<td>
						<if condition="$email!=''">{$email}  <else /> 请尽快补全E-Mail信息，以便获得系统E-Mail模块功能！</if>
						</td>
					</tr>
					<tr>
						<td>签名：</td>
						<td>
						<if condition="$sign==''">没有签名，请尽快上传签名，以便获得签名功能！<else /> <img src="{$sign}" class="user_sign"  /></if>
						</td>
					</tr>
		        </table>   
		    </div>   
		    <div title="修改信息" data-options="" style="overflow:auto;padding:20px;"> 
<div  class="easyui-panel" title="用户信息修改"     
        style="width:100%;height:250px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:false,    
                collapsible:true,minimizable:false,maximizable:false">   
   
		        <form id="user_info_editor" method="post">
		<input type="hidden" id="id" name="id" type="text"/>
		<table class="userform">
			<tr>
				<th>用户名:</th>
				<td>				
					<input id="username" name="username" type="text" data-options="" class="easyui-textbox" value="{$username}"/>
					
				</td>
			</tr>
			<tr>
				<th>昵称:</th>
				<td>				
					<input id="nickname" name="nickname" type="text" data-options="" class="easyui-textbox" value="{$nickname}"/>
					
				</td>
			</tr>
			<tr>
				<th>E-Mail:</th>
				<td>
					
					<input id="email" name="email" type="text" class="easyui-textbox" data-options="validType:'email'" value="{$email}"/>  
				</td>
			</tr>

			<tr>
				<th>密码：</th>
				<td>					
					<input  id="password" name="password" type="password" class="easyui-textbox" data-options="" />   &nbsp;&nbsp;（密码留空则表示不进行更改！）
				</td>
			</tr>
           <tr>
				<th>确认密码：</th>
				<td>					
					<input  id="repassword" name="repassword" type="password" class="easyui-textbox" />&nbsp;&nbsp;（密码留空则表示不进行更改！）
				</td>
			</tr>
		</table>
	</form> 
	<a href="#" id="user_info_edit_btn" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确认</a>
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#user_info_editor').form('clear')">取消</a>
</div> 



		    </div>   
		    <div title="修改头像" data-options="iconCls:'icon-reload'" style="padding:10px;display:none;"> 



		    	<div class="easyui-layout" data-options="fit:true,border:false">  
		    		<div data-options="region:'north',title:'',split:false,border:false,border:false" style="height:50px;">
		    			<input  name="avatar" id="avatar_input" style="width:80%;"  class="easyui-filebox" data-options="buttonText:'上传头像',buttonIcon:'icon-standard-application-edit',accept:'image/gif,image/jpeg,image/jpg,image/png,image/svg'"/>
		    		</div>   
		    		<div data-options="region:'south',title:'',split:false,border:false" style="height:30px;">
		    		</div>    

		    		<div data-options="region:'center',title:'',border:false" style="padding:5px;">
		    			<img src="__PUBLIC__/js/cropper/hb17-wallpaper-kristen-stewart-twilight-bella-wwan-film-40-wallpaper.jpg" id="target" alt="[Jcrop Example]" />

		    			<div id="preview-pane">
		    				<div class="preview-container">
		    					<img src="__PUBLIC__/js/cropper/hb17-wallpaper-kristen-stewart-twilight-bella-wwan-film-40-wallpaper.jpg" class="jcrop-preview" alt="Preview" />
		    				</div>
		    			</div> 
		    		</div>   
		    	</div>  







<!-- 		    <img src="__PUBLIC__/js/cropper/hb17-wallpaper-kristen-stewart-twilight-bella-wwan-film-40-wallpaper.jpg" id="target" alt="[Jcrop Example]" />

  <div id="preview-pane">
    <div class="preview-container">
      <img src="__PUBLIC__/js/cropper/hb17-wallpaper-kristen-stewart-twilight-bella-wwan-film-40-wallpaper.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>      --> 


		    </div> 
		    <div title="用户记录" data-options="iconCls:'icon-reload'" style="padding:20px;display:none;">   
		        正在开发中！  
		    </div>   
		</div>  
    </div>   
</div> 


<script type="text/javascript" src="__PUBLIC__/js/cropper/js/jquery.Jcrop.min.js"></script>
<script>
	/**
	 * [upload_avatar 上传或者更改头像]
	 * @return {[type]} [description]
	 */
function upload_avatar_show(){
	$('#user_info_tab').tabs('select','修改头像'); 

}

jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      boxWidth:600,
      boxHeight:600,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };

  });

$('#avatar_input').filebox({onChange:function(newValue, oldValue){
	  $.post('__APP__/Admin/Rule/deluserfromgroup', {
                            group_id : {$id},uid : row.id
                        }, function(data) {
                            if (data.status==1) {
                                $.messager.alert('从用户组取消用户', data.data, 'info');
                            
                                $("#adduserlist").datagrid("reload");
                            } else {
                                $.messager.show({ // show error message  
                                    title : '错误',
                                    msg : data.data
                                });

                            }
                        }, 'json'); 
	
}})



/** 
* 从 file 域获取 本地图片 url 
*/ 
function getFileUrl(sourceId) { 
var url; 
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
url = document.getElementById(sourceId).value; 
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} 
return url; 
} 
</script>